<template>
	<view class="mine-page page">
		<scroll-view :scroll-y="true" @scroll="scrollChange" class="content">
			<CustomNav :active="{ textColor: '#fff', background: 'linear-gradient(to right, #FF2F34, #FF6B18)' }"
				title="益联生态" :is-back="true">
			</CustomNav>
			<view class="top-block"></view>
			<view class="info-block">
				<view class="scan-block" @click="getScan">
					<view class="scan-top">
						<image
							src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/alliance/scan.png">
						</image>
						<view class="scan-title">扫码核销</view>
					</view>
					<view class="min-tips">扫一扫顾客出示的核销码</view>
				</view>
				<view class="small-title">核销记录</view>
				<template v-if="list.length > 0">
					<view class="scan-item" v-for="item in list" :key="item.id">
						<view class="scan-title">{{item.activityName}}</view>
						<view class="scan">
							<view class="scan-left">订单编号：</view>
							<view class="scan-right">{{item.orderId}}</view>
						</view>
						<view class="scan">
							<view class="scan-left">核销日期：</view>
							<view class="scan-right">{{item.createTime}}</view>
						</view>
					</view>
				</template>
				<view v-if="more==false&&list.length==0" style="width:100%;text-align: center;">暂无数据</view>
				<view v-else-if="more==false&&list.length>0" style="width:100%;text-align: center;">没有更多了</view>
			</view>
		</scroll-view>
		<view class="sign-pop" v-if="signShow == true">
			<view class="sign-block">
				<view class="sign-top">
					<view class="left">消费多少送给多少</view>
					<view @click="signShow=false">
						<image
							src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/alliance/close.png"
							mode=""></image>
					</view>
				</view>
				<input placeholder="请输入扣减金额" v-model="form.price" class="from" />
				<view class="btn-item">
					<view class="btn" @click="signShow=false">取消</view>
					<view class="btn" @click="cancel">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import CustomNav from '@/components/CustomNav/CustomNav';
	import {
		removeStorage,
		showToast
	} from '@/util/auth';
	import {
		getVerificationRecordList,
		businessVerification,
		getConsumptionOrder
	} from '@/api/mine.js'
	import {
		isMore
	} from '@/util/util.js'
	import {
		validate
	} from '@/util/validate.js'
	export default {
		components: {
			CustomNav,
		},
		data() {
			return {
				list: [],
				conf: {
					page: 1,
					limit: 10
				},
				more: true,
				signShow: false,
				form: {
					price: ''
				},
				rules: {
					price: {
						name: '扣减金额',
						required: true,
					},
				},
				result: ''
			}
		},
		methods: {
			cancel() {
				if (validate(this.form, this.rules)) {
					uni.showLoading({
						title: '核销中',
						mask: true
					})
					getConsumptionOrder({
						verificationCode: this.result,
						orderMoney: this.form.price
					}).then((res) => {
						this.showToast('核销成功', () => {
							this.getVerificationRecordList(true)
						}, 1000)
						this.signShow = false
					})
				}
			},
			getScan() {
				var that = this;
				uni.scanCode({
					onlyFromCamera: true,
					success: (res) => {
						uni.showLoading({
							title: '核销中',
							mask: true
						})
						if (res.result.includes('classification=5#')) {
							uni.hideLoading()
							this.signShow = true
							this.result = res.result
							
						} else {
							businessVerification({
								orderId: res.result,
							}).then((res) => {
								that.showToast('核销成功', () => {
									that.getVerificationRecordList(true)
								}, 1000)
							})
						}
					}
				});
			},
			scrollChange(e) {
				uni.$emit('scrollChange', e)
			},
			handleRefresh() {
				this.conf.page = 1;
				this.more = true
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				this.getVerificationRecordList(true)
			},
			getVerificationRecordList(refresh = false) {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				getVerificationRecordList({
					page: this.conf.page,
					limit: this.conf.limit,
				}).then((res) => {
					let list = res.list || [];
					if (refresh) {
						this.list = list;

					} else {
						this.list = [...this.list, ...list]
					}
					this.more = isMore(this.conf.page, this.conf.limit, res.count)
				})
			},
		},
		onPullDownRefresh() {
			this.handleRefresh();
		},
		onReachBottom() {
			if (this.more) {
				this.conf.page++;
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				this.getVerificationRecordList();
			}
		},
		onLoad(e) {
			if(e.consumption)
			{
				this.signShow = true
				this.result = e.consumption
			}
			//商家查询核销记录
			this.getVerificationRecordList(true)
		}
	}
</script>

<style lang="scss" scoped>
	.mine-page {
		overflow: hidden;

		.content {
			width: 100%;
			overflow-y: auto;
			position: relative;

			.top-block {
				height: 356rpx;
				width: 100%;
				background: url('https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/alliance/mine-bg.png') no-repeat center;
				display: flex;
				//align-items: center;
				justify-content: space-between;
				padding-top: 20rpx;
				padding-left: 30rpx;
				padding-right: 30rpx;

			}

			.info-block {
				background: linear-gradient(to bottom, #E6F0FE, #F7F6F9);
				border-radius: 40rpx 40rpx 0 0;
				padding: 30rpx 30rpx;
				// min-height: 60vh;

				.scan-block {
					width: 100%;
					height: 240rpx;
					background: linear-gradient(270deg, #FFC43F 0%, #FF9C00 100%);
					border-radius: 20rpx;
					margin-top: -150rpx;
					padding: 50rpx 60rpx;

					.scan-top {
						display: flex;

						image {
							width: 48rpx;
							height: 48rpx;
							margin-right: 20rpx;
						}

						.scan-title {
							font-family: FZHanZhenGuangBiaoS-GB;
							font-size: 40rpx;
							font-weight: normal;
							line-height: 30px;
							letter-spacing: 0px;

							/* 纯白 */
							color: #FFFFFF;
						}
					}

					.min-tips {
						font-size: 28rpx;
						font-weight: normal;
						line-height: 60rpx;
						letter-spacing: 0px;
						color: #FFFFFF;
						margin-top: 20rpx;
					}
				}

				.small-title {
					font-family: FZHanZhenGuangBiaoS-GB;
					font-size: 18px;
					font-weight: normal;
					line-height: normal;
					letter-spacing: 0em;
					color: #FF2F34;
					margin: 30rpx 0 20rpx 0;
				}

				.scan-item {
					padding: 30rpx;
					background-color: #FFFFFF;
					margin-bottom: 20rpx;
					border-radius: 15rpx;

					.scan-title {
						font-size: 32rpx;
						font-weight: bold;
						line-height: 44rpx;
						letter-spacing: 0px;
						color: #1A1A1A;
					}

					.scan {
						width: 100%;
						display: flex;
						font-size: 28rpx;
						line-height: 22px;
						color: #767676;
						margin-top: 20rpx;

						.scan-left {
							width: 140rpx;
						}

						.scan-right {
							width: calc(100% - 160rpx);
							word-break: break-all;
						}
					}
				}
			}
		}

		.sign-pop {
			position: fixed;
			left: 0;
			top: 0;
			background: rgba(0, 0, 0, 0.2);
			z-index: 999999;
			width: 100vw;
			height: 100vh;

			.sign-block {
				width: calc(100% - 240rpx);
				height: 450rpx;
				background: #fff;
				z-index: 99;
				position: fixed;
				transform: translate(-50%, 0%);
				left: 50%;
				bottom: 29%;
				box-shadow: 0 0 6px 0px #dadada;
				border-radius: 30rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-around;
				padding: 30rpx;

				.sign-top {
					display: flex;
					justify-content: space-between;
					width: 100%;

					image {
						width: 40rpx;
						height: 40rpx;
					}
				}

				.from {
					width: 100%;
					border: 1px solid #dadada;
					border-radius: 20rpx;
					margin-top: 30rpx;
					height: 70rpx;
					padding: 6rpx 12rpx;
					font-size: 28rpx;
				}

				.btn-item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 100%;

					.btn {
						width: calc((100% - 40rpx)/2);
						height: 60rpx;
						font-size: 28rpx;
						border-radius: 30rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.btn:first-child {
						border: 1px solid #767676;
					}

					.btn:last-child {
						background-color: #FF2F34;
						color: #fff;
					}
				}
			}
		}
	}
</style>